import { Form, Button, Input, Divider } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import { resourcePath } from '../../../../../../../../utils/resource';
import { useState, useEffect } from 'react'
export default function Dialog(props) {
    const [isDialogOpen, setDialogOpen] = useState(true);

    return <>
        <div style={{
            width: 300,
            height: 200,
            background: 'rgba(9, 28, 38,.6)',
            position: 'absolute',
            top: 80,
            left: -160,
            borderRadius: 8,
            display: isDialogOpen ? 'block' : 'none'
        }} >
            <div style={{
                background: `url(${resourcePath.blockTitleBg})`,
                height: 36,
                backgroundSize: '100% 100%',
                fontSize: 16,
                lineHeight: '36px',
                paddingLeft: 10,
                fontWeight: 'bold',

            }}>灾害点名称
                <Button size='small' icon={<CloseOutlined />} onClick={
                    () => setDialogOpen(false)

                } style={{
                    marginLeft: 180,
                    background: "#00000000"
                }} />
            </div>
            <Divider style={{
                width: '100%',
                background: '#fff'
            }} />
            <Form wrapperCol={{
                span: 16
            }}
                labelCol={{
                    span: 6
                }}
                style={{
                    maxWidth: 300
                }}>
                <Form.Item label='名称' name='名称'
                    rules={[{
                        required: true,
                        message: '名称不能为空'
                    }]}>
                    <Input />
                </Form.Item>
                <Form.Item wrapperCol={{
                    offset: 10
                }}>
                    <Button type='primary' htmlType='submit'>确定</Button>
                </Form.Item>

            </Form>
        </div>
        {/* </div> */}
    </>
}
